import React, { Component } from "react";
import "./Todo.css";
import List from "./List";
import Add from "./Add";

export default class Todo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: [
        {
          id: 1,
          title: "吃饭",
          status: 0,
        },
        {
          id: 2,
          title: "睡觉",
          status: 1,
        },
        {
          id: 3,
          title: "打豆豆",
          status: 0,
        },
        {
          id: 4,
          title: "打张献小可爱",
          status: 1,
        },
      ],
      //   title: "",
    };
  }
  //   getTitle = (e) => {
  //     this.setState({
  //       title: e.target.value,
  //     });
  //   };
  //实现类似于vue中的双向数据绑定
  add = (title) => {
    // this.state.list.push({
    //   id: this.state.list.length + 1,
    //   title: this.state.title,
    //   status: 0,
    // });

    // let res=this.state.list;
    // res.push()
    this.setState({
      list: [
        ...this.state.list,
        {
          id: this.state.list.length + 1,
          title: title,
          status: 0,
        },
      ],
      title: "",
    });
    //在react中操作数据 必须用 setState 要向一个数组中添加一个东西，在react中建议使用展开运算符
  };

  change = (index) => {
    var res = this.state.list;
    res[index].status = !res[index].status;
    this.setState({
      list: res,
    });
  };

  render() {
    return (
      <div>
        <h1>{this.props.msg}</h1>
        <Add add={this.add} />
        <hr />
        <List list={this.state.list} change={this.change} />
      </div>
    );
  }
}
